<template>
  <div class="register">
	  <div id="bgd"><canvas id="myCanvas" :width="width" :height="height"></canvas></div>
	  		<div id="registerBox">
    <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
      <h3 class="title">药品库存仓库管理系统</h3>
      <el-form-item prop="username">
        <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="registerForm.password"
          type="password"
          auto-complete="off"
          placeholder="密码"
          @keyup.enter.native="handleRegister"
        >
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="confirmPassword">
        <el-input
          v-model="registerForm.confirmPassword"
          type="password"
          auto-complete="off"
          placeholder="确认密码"
          @keyup.enter.native="handleRegister"
        >
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="code" v-if="captchaEnabled">
        <el-input
          v-model="registerForm.code"
          auto-complete="off"
          placeholder="验证码"
          style="width: 63%"
          @keyup.enter.native="handleRegister"
        >
          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
        </el-input>
        <div class="register-code">
          <img :src="codeUrl" @click="getCode" class="register-code-img"/>
        </div>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width:100%;background-color: transparent;color: #39f;"
          @click.native.prevent="handleRegister"
        >
          <span v-if="!loading">注 册</span>
          <span v-else>注 册 中...</span>
        </el-button>
        <div style="float: right;">
          <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
        </div>
      </el-form-item>
    </el-form>
    <!--  底部  -->
    <div class="el-register-footer">
      <span>Copyright © 2022-2023 努力地派大星 All Rights Reserved.</span>
    </div>
  </div>
  </div>
</template>

<script>
import { getCodeImg, register } from "@/api/login";

export default {
  name: "Register",
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.registerForm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
		canvas: null,
		context: null,
		stars: [], //星星数组
		shadowColorList: ['#39f', '#ec5707', '#b031d4', '#22e6c7', '#92d819', '#14d7f1', '#e23c66'], //阴影颜色列表
		directionList: ['leftTop', 'leftBottom', 'rightTop', 'rightBottom'], //星星运行方向
		speed: 50, //星星运行速度
		last_star_created_time: new Date(), //上次重绘星星时间
		Ball: class Ball {
			constructor(radius) {
				this.x = 0;
				this.y = 0;
				this.radius = radius;
				this.color = '';
				this.shadowColor = '';
				this.direction = '';
			}
		
			draw(context) {
				context.save();
				context.translate(this.x, this.y);
				context.lineWidth = this.lineWidth;
				var my_gradient = context.createLinearGradient(0, 0, 0, 8);
				my_gradient.addColorStop(0, this.color);
				my_gradient.addColorStop(1, this.shadowColor);
				context.fillStyle = my_gradient;
				context.beginPath();
				context.arc(0, 0, this.radius, 0, Math.PI * 2, true);
				context.closePath();
		
				context.shadowColor = this.shadowColor;
				context.shadowOffsetX = 0;
				context.shadowOffsetY = 0;
				context.shadowBlur = 10;
		
				context.fill();
				context.restore();
			}
		}, //工厂模式定义Ball类
		width: window.innerWidth,
		height: window.innerHeight,
		
      codeUrl: "",
      registerForm: {
        username: "",
        password: "",
        confirmPassword: "",
        code: "",
        uuid: ""
      },
      registerRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" },
          { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, trigger: "blur", message: "请再次输入您的密码" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
      },
      loading: false,
      captchaEnabled: true
    };
  },
  mounted() {
  	this.canvas = document.getElementById('myCanvas');
  	this.context = this.canvas.getContext('2d');
  
  	this.createStar(true);
  	this.drawFrame();
  },
  created() {
    this.getCode();
  },
  methods: {
		//重复动画
		drawFrame() {
			let animation = requestAnimationFrame(this.drawFrame);
			this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
			this.createStar(false);
			this.stars.forEach(this.moveStar);
		},
		//展示所有的星星
		createStar(params) {
			let now = new Date();
			if (params) {
				//初始化星星
				for (var i = 0; i < 50; i++) {
					const radius = Math.random() * 3 + 2;
					let star = new this.Ball(radius);
					star.x = Math.random() * this.canvas.width + 1;
					star.y = Math.random() * this.canvas.height + 1;
					star.color = '#ffffff';
					star.shadowColor = this.shadowColorList[Math.floor(Math.random() * this.shadowColorList.length)];
					star.direction = this.directionList[Math.floor(Math.random() * this.directionList.length)];
					this.stars.push(star);
				}
			} else if (!params && now - this.last_star_created_time > 3000) {
				//每隔3秒重绘修改颜色其中30个球阴影颜色
				for (var i = 0; i < 30; i++) {
					this.stars[i].shadowColor = this.shadowColorList[Math.floor(Math.random() * this.shadowColorList.length)];
				}
				this.last_star_created_time = now;
			}
		},
		//移动
		moveStar(star, index) {
			if (star.y - this.canvas.height > 0) {
				//触底
				if (Math.floor(Math.random() * 2) === 1) {
					star.direction = 'leftTop';
				} else {
					star.direction = 'rightTop';
				}
			} else if (star.y < 2) {
				//触顶
				if (Math.floor(Math.random() * 2) === 1) {
					star.direction = 'rightBottom';
				} else {
					star.direction = 'leftBottom';
				}
			} else if (star.x < 2) {
				//左边
				if (Math.floor(Math.random() * 2) === 1) {
					star.direction = 'rightTop';
				} else {
					star.direction = 'rightBottom';
				}
			} else if (star.x - this.canvas.width > 0) {
				//右边
				if (Math.floor(Math.random() * 2) === 1) {
					star.direction = 'leftBottom';
				} else {
					star.direction = 'leftTop';
				}
			}
			if (star.direction === 'leftTop') {
				star.y -= star.radius / this.speed;
				star.x -= star.radius / this.speed;
			} else if (star.direction === 'rightBottom') {
				star.y += star.radius / this.speed;
				star.x += star.radius / this.speed;
			} else if (star.direction === 'leftBottom') {
				star.y += star.radius / this.speed;
				star.x -= star.radius / this.speed;
			} else if (star.direction === 'rightTop') {
				star.y -= star.radius / this.speed;
				star.x += star.radius / this.speed;
			}
			star.draw(this.context);
		},
		
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.registerForm.uuid = res.uuid;
        }
      });
    },
    handleRegister() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          this.loading = true;
          register(this.registerForm).then(res => {
            const username = this.registerForm.username;
            this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
              dangerouslyUseHTMLString: true,
              type: 'success'
            }).then(() => {
              this.$router.push("/login");
            }).catch(() => {});
          }).catch(() => {
            this.loading = false;
            if (this.captchaEnabled) {
              this.getCode();
            }
          })
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.register {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	background-image: url('../assets/images/login-background.jpg');
	background-size: cover;
	#bgd {
		height: 100vh;
		width: 100vw;
		overflow: hidden;
	}
}
.title {
	margin: 0px auto 30px auto;
	text-align: center;
	color: #fff;
}

.register-form {
	border-radius: 6px;
	width: 400px;
	padding: 25px 25px 5px 25px;
	background: linear-gradient(230deg, rgba(53, 57, 74, 0) 0%, rgb(0, 0, 0) 100%);
  .el-input {
		height: 38px;
		input {
			background-color: transparent;
			color: #39f;
			height: 38px;
		}
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
#registerBox {
	width: 420px;
	height: 390px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	opacity: 1;
}
.register-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.register-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-register-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.register-code-img {
  height: 38px;
}
</style>
